<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<Link rel="stylesheet" href="css.css">
</head>
<body>
<div class="top-nav">
    <div class="container clearf">
        <div class="fl">
            <a class="item" href="#">首页</a>
        </div>
        <div class="fr">
            <a class="item" href="#">我的订单</a>
            <a class="item" href="#">我的收藏</a>
            <a class="item" href="#">登录</a>
            <a class="item" href="#">注册</a>
        </div>
    </div>
</div>
<div class="header clearf">
    <div class="container ">
        <div class="col-1">
            <img src="image/logo.png" alt="">
        </div>
        <div class="col-6 seacher-bar">
            <input type="text">
            <button>搜索</button>
        </div>
        <div class="col-3 cart">
            <a href="#">我的购物车</a>
        </div>
    </div>
</div>
<div class="main-promote clearf">
    <div class="container ">
        <div class="col-2 cat">
            <div class="item">选购 / 手机</div>
            <div class="item">选购 / 平板</div>
            <div class="item">选购 / 电脑</div>
            <div class="item">选购 / 耳机</div>
            <div class="item">选购 / 手表</div>
            <div class="item">选购 / 音响</div>
            <div class="item">教育 / 课程</div>
            <div class="item">商店 / 分类</div>
            <div class="item">服务 / 账户</div>
            <div class="item">环保 / 隐私</div>
        </div>
        <div class="col-6">
            <div class="slider">
                <img src="image/iphone12.jpg" alt="">
            </div>
            <div class="sub-promote">
                <div class="col-5">
                    <img src="image/imac.jpg" alt="">
                </div>
                <div class="col-5">
                    <img src="image/ipadpro.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="col-2 info">
            <div class="auth">
                <div class="avator"></div>
                你好 欢迎登录 apple
            </div>
            <div class="anno">
                <div class="title">公告</div>
                <div class="content">
                    <b>iphone12 升维大提速</b>
                    <b>iphone12pro 自我再飞跃</b>
                    <b> ipadpro 由M1强势驱动</b>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="cat-promote clearf">
        <div class="title">手机</div>
        <div class="content">
            <div class="col-2 item">
                <div class="card"></div>
            </div>
            <div class="col-3 item">
                <div class="card"></div>
            </div>
            <div class="col-2 item">
                <div class="card"></div>
            </div>
            <div class="col-3 item">
                <div class="card"></div>
            </div>
        </div>
    </div>
    <div class="cat-promote clearf">
        <div class="title">平板电脑</div>
        <div class="content">
            <div class="col-2 item">
                <div class="card"></div>
            </div>
            <div class="col-3 item">
                <div class="card"></div>
            </div>
            <div class="col-2 item">
                <div class="card"></div>
            </div>
            <div class="col-3 item">
                <div class="card"></div>
            </div>
        </div>
    </div>
    <div class="cat-promote clearf">
        <div class="title">电脑</div>
        <div class="content">
            <div class="col-5 item">
                <div class="card"></div>
            </div>
            <div class="col-5 item">
                <div class="card"></div>
            </div>
        </div>
    </div>
    <div class="cat-promote clearf">
        <div class="title">手表</div>
        <div class="content">
            <div class="col-5 item">
                <div class="card"></div>
            </div>
            <div class="col-5 item">
                <div class="card"></div>
            </div>
        </div>
    </div>
    <div class="cat-promote clearf">
        <div class="title">配件</div>
        <div class="content">
            <div class="col-2 item">
                <div class="card"></div>
            </div>
            <div class="col-3 item">
                <div class="card"></div>
            </div>
            <div class="col-2 item">
                <div class="card"></div>
            </div>
            <div class="col-3 item">
                <div class="card"></div>
            </div>
        </div>
    </div>
</div>
    <div class="footer clearf">
        <div class="container">

        </div>
    </div>
</body>
</html>
